<template>
  <body>
    <div class="container">
      <!-- 卡片部分 -->
      <div class="card-column column-0">
        <div class="card card-color-0">
          <div class="border" />
          <img
            src="../../assets/oio2.jpg"
            class="jjj1"
          >
          <h1 class="kkk1">
            智能眼疾识别--基于深度学习分析眼底图像，实现对常见眼疾的检测和分类，提供预测结果及建议
          </h1>
        </div>
        <div class="card card-color-2">
          <div class="border" />
          <img
            src="../../assets/oio6.jpg"
            class="jjj1"
          >
          <h1 class="kkk1">
            AI眼疾咨询--利用人工智能技术帮助患者进行眼科咨询诊断，提供智能化、个性化的健康管理服务
          </h1>
        </div>
      </div>
      <div class="card-column column-1">
        <div class="card card-color-1">
          <div class="border" />
          <img
            src="../../assets/oio3.jpg"
            class="jjj1"
          >
          <h1 class="kkk1">
            病历详情查询--支持根据眼疾类别，检测时间分页查询眼疾病历相关信息
          </h1>
        </div>
        <div class="card card-color-3">
          <div class="border" />
          <img
            src="../../assets/oio5.jpg"
            class="jjj1"
          >
          <h1 class="kkk1">
            生成检测报告--结合可视化数据，提供更加生动和易于理解的报告，做出更加精准的诊断和治疗决策
          </h1>
        </div>
      </div>

      <!-- 登录/注册部分 -->
      <div
        class="login-section"
        :style="{ height: formHeight }"
      >
        <h2>{{ isLoginMode ? '登录' : '注册' }}</h2>
        <form @submit.prevent="isLoginMode ? login() : register()">
          <!-- 注册时额外字段 -->
          <div v-if="!isLoginMode">
            <div class="input-group">
              <label for="nickname">昵称:</label>
              <input
                id="nickname"
                v-model="nickname"
                type="text"
                required
              >
            </div>
            <div class="input-group">
              <label for="phone">电话:</label>
              <input
                id="phone"
                v-model="phone"
                type="text"
                required
              >
            </div>
            <div class="input-group">
              <label for="gender">性别:</label>
              <select
                id="gender"
                v-model="gender"
              >
                <option value="male">
                  男
                </option>
                <option value="female">
                  女
                </option>
              </select>
            </div>
          </div>
          <div class="input-group">
            <label for="account">账号:</label>
            <input
              id="account"
              v-model="account"
              type="text"
              required
            >
          </div>
          <div class="input-group">
            <label for="password">密码:</label>
            <input
              id="password"
              v-model="password"
              type="password"
              required
            >
          </div>
          <button
            type="submit"
          >
            {{ isLoginMode ? '登录' : '注册' }}
          </button>
        </form>
        <button
          class="toggle-mode"
          @click="toggleMode"
        >
          {{ isLoginMode ? '还没有账号？去注册' : '已有账号？去登录' }}
        </button>
      </div>
    </div>

    <!-- 页面遮罩和详情部分 -->
    <div
      id="cover"
      class="cover"
    />
    <div
      v-if="pageIsOpen"
      id="open-content"
      class="open-content"
    >
      <a
        id="close-content"
        href="#"
        class="close-content"
        @click="onCloseClick"
      >
        <span class="x-1" />
        <span class="x-2" />
      </a>
      <img
        id="open-content-image"
        :src="openContentImage"
      >
      <div
        id="open-content-text"
        class="text"
        v-html="openContentText"
      />
    </div>

    <div class="title">
      <h1 style="color:white">
        慧眼·EyeSmart
      </h1>
    </div>
  </body>
</template>

<script>
import axios from 'axios'
export default {
  name: 'IndexPage',
  data () {
    return {
      cards: [],
      pageIsOpen: false,
      currentCard: null,
      openContentImage: '',
      openContentText: '',
      windowWidth: window.innerWidth,
      windowHeight: window.innerHeight,
      isLoginMode: true,
      nickname: '',
      account: '',
      password: '',
      phone: '',
      gender: 'male'
    }
  },
  computed: {
    formHeight () {
      return this.isLoginMode ? '400px' : '590px'
    }
  },
  methods: {
    toggleMode () {
      this.isLoginMode = !this.isLoginMode
    },
    async login () {
      const url = '/api/user/login'
      const payload = {
        account: this.account,
        password: this.password
      }
      try {
        const response = await axios.post(url, payload)
        const userId = response.data.data.id
        const nickname = response.data.data.nickName
        const account = response.data.data.account
        const password = response.data.data.password
        const token = response.data.data.token
        const phone = response.data.data.phone
        const sex = response.data.data.sex
        const time = response.data.data.time
        this.$store.commit('setUserId', userId)
        this.$store.commit('setNickname', nickname)
        this.$store.commit('setAccount', account)
        this.$store.commit('setPassWord', password)
        this.$store.commit('setToken', token)
        this.$store.commit('setPhone', phone)
        this.$store.commit('setSex', sex)
        this.$store.commit('setTime', time)

        console.log('登录成功:', response)
        this.$router.push('/home')
      } catch (error) {
        console.error('登录失败:', error)
      }
    },
    async register () {
      const url = '/api/user/register'
      const payload = {
        nickName: this.nickname,
        account: this.account,
        password: this.password,
        sex: this.gender,
        phone: this.phone
      }
      try {
        const response = await axios.post(url, payload)
        console.log('注册成功:', response.data)
        alert('注册成功')
        this.isLoginMode = true
      } catch (error) {
        console.error('注册失败:', error)
      }
    },
    onCardClick (event, index) {
      const card = event.target.closest('.card')
      this.currentCard = card
      card.classList.add('clicked')
      setTimeout(() => this.animateCoverUp(card), 500)
      this.animateOtherCards(card, true)
      this.openContentImage = card.querySelector('img').src
      this.openContentText = `<h1>${card.querySelector('h1').textContent}</h1>`
      setTimeout(() => {
        this.pageIsOpen = true
      }, 300)
    },
    onCloseClick () {
      this.openContentText = ''
      this.openContentImage = ''
      this.pageIsOpen = false
      this.animateCoverBack(this.currentCard)
      this.animateOtherCards(this.currentCard, false)
    },
    animateCoverUp (card) {
      const cardPosition = card.getBoundingClientRect()
      const cardStyle = getComputedStyle(card)
      this.setCoverPosition(cardPosition)
      this.setCoverColor(cardStyle)
      this.scaleCoverToFillWindow(cardPosition)
      setTimeout(() => {
        window.scroll(0, 0)
      }, 300)
    },
    animateCoverBack (card) {
      const cardPosition = card.getBoundingClientRect()
      this.setCoverPosition(cardPosition)
      document.getElementById('cover').style.transform = 'scaleX(1) scaleY(1) translate3d(0px, 0px, 0px)'
      setTimeout(() => {
        this.currentCard.classList.remove('clicked')
      }, 301)
    },
    setCoverPosition (cardPosition) {
      const cover = document.getElementById('cover')
      cover.style.left = `${cardPosition.left}px`
      cover.style.top = `${cardPosition.top}px`
      cover.style.width = `${cardPosition.width}px`
      cover.style.height = `${cardPosition.height}px`
    },
    setCoverColor (cardStyle) {
      const cover = document.getElementById('cover')
      cover.style.backgroundColor = cardStyle.backgroundColor
    },
    scaleCoverToFillWindow (cardPosition) {
      const scaleX = this.windowWidth / cardPosition.width
      const scaleY = this.windowHeight / cardPosition.height
      const offsetX = (this.windowWidth / 2 - cardPosition.width / 2 - cardPosition.left) / scaleX
      const offsetY = (this.windowHeight / 2 - cardPosition.height / 2 - cardPosition.top) / scaleY
      const cover = document.getElementById('cover')
      cover.style.transform = `scaleX(${scaleX}) scaleY(${scaleY}) translate3d(${offsetX}px, ${offsetY}px, 0px)`
    },
    animateOtherCards (card, out) {
      let delay = 100
      this.cards.forEach((cardElement) => {
        if (cardElement === card) return
        if (out) this.animateOutCard(cardElement, delay)
        else this.animateInCard(cardElement, delay)
        delay += 100
      })
    },
    animateOutCard (card, delay) {
      setTimeout(() => {
        card.classList.add('out')
      }, delay)
    },
    animateInCard (card, delay) {
      setTimeout(() => {
        card.classList.remove('out')
      }, delay)
    }
  }
}
</script>

<style scoped>
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden; /* 如果不需要滚动条，可以加上这行 */
}

body {
  background: linear-gradient(135deg, #1e1e2f, #34345e);
  font-size: 18px;
  font-family: 'Roboto', sans-serif;
  color: #e0e0e0;
  overflow-x: hidden;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
}
.kkk1{
  margin: 0px;
  height: 50px;
  width: 50px;
}
.jjj1{
  width: 60px;
  height: 200px;
}
.card-column {
  width: 50%;
  padding: 4%;
  box-sizing: border-box;
}

.column-1 {
  padding-top: 100px;
}

.card {
  width: 92%;
  max-width: 340px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  background: #22224b;
  color: #fff;
  cursor: pointer;
  margin-bottom: 60px;
  border-radius: 10px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
  transition: transform 0.4s, box-shadow 0.4s;
}

.card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5);
}

.card h1 {
  position: relative;
  padding: 190px 0px 100px 10px;
  width: 90%;
  font-size: 22px;
}

.card > img {
  width: 90%;
  position: absolute;
  top: -6%;
  left: -6%;
  border-radius: 10px;
}

.card-color-0 {
  background-color: #01b4e4;
}

.card-color-1 {
  background-color: #8e44ad;
}

.card-color-2 {
  background-color: #27ae60;
}

.card-color-3 {
  background-color: #c0392b;
}

/* Login Form Styling */
.login-section {
  margin-left: 20px;
  margin-top: 150px;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(10px);
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
  width: 600px;
  transition: height 0.3s ease-in-out;
}

.login-section h2 {
  margin-bottom: 20px;
  color: #fff;
  text-align: center;
  font-weight: bold;
}

.input-group {
  margin-bottom: 15px;
  margin-right: 20px;
}

.input-group label {
  display: block;
  margin-bottom: 5px;
  color: #bbb;
}

.input-group input,
.input-group select {
  width: 100%;
  padding: 10px;
  border: none;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 16px;
  outline: none;
  transition: all 0.3s ease;
}

.input-group input:focus {
  box-shadow: 0 0 8px #00bcd4;
}

button {
  width: 100%;
  padding: 10px;
  background: linear-gradient(90deg, #01b4e4, #1de9b6);
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 10px;
  font-size: 18px;
  font-weight: bold;
  transition: background 0.4s ease, transform 0.2s;
}

button:hover {
  background: linear-gradient(90deg, #1de9b6, #01b4e4);
  transform: scale(1.05);
}

/* Cover Effects */
.cover {
  position: fixed;
  background: linear-gradient(135deg, rgba(0, 150, 250, 0.8), rgba(0, 255, 150, 0.8));
  z-index: 100;
  transform-origin: 50% 50%;
  border-radius: 10px;
}

.title {
  width: 500px;
  height: 100px;
  position: relative;
  top: -900px;
  right: -990px;
  color: #01b4e4;
  font-size: 24px;
  font-weight: bold;
}

.title h1 {
  text-align: center;
  animation: neonGlow 1.5s infinite alternate;
}

/* Glow Animation */
@keyframes neonGlow {
  0% {
    text-shadow: 0 0 5px #01b4e4, 0 0 20px #01b4e4, 0 0 30px #01b4e4, 0 0 40px #1de9b6;
  }
  100% {
    text-shadow: 0 0 10px #1de9b6, 0 0 30px #01b4e4, 0 0 50px #1de9b6, 0 0 60px #01b4e4;
  }
}

/* Media Queries */
@media screen and (max-width: 600px) {
  .card-column {
    width: 90%;
  }

  .column-1 {
    padding-top: 0px;
  }

  .open-content img {
    margin-top: 40px;
  }

  .login-section {
    margin-left: 0;
    margin-top: 20px;
    width: 100%;
  }
}
</style>
